<template>
    <div class="sys-table">
        <slot></slot>
        <div class="sys-table-pagination">
            <template v-if="pagination">
                <el-pagination background
                    :layout="pageLayout"
                    :total="paginationTotal"
                    :page-size="pageSize"
                    @size-change="sizeChange"
                    @current-change="myPageChange"
                    :current-page.sync="curPage"
                    :class="align"
                   >
                </el-pagination>
            </template>
            <template v-else>
                <slot name="pagination"></slot>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TableMixin',

    data() {
        return {
            curPage: this.currentPage
        }
    },

    props: {
        pagination: Boolean,
        paginationAlign: String,
        currentPage: Number,
        pageSize:  {
            type: Number,
            default: function () {
                return this.$store.state.pageSize
            }
        },
        paginationTotal: {
            type: Number,
            default: function () {
                return 10
            }
        },
        sizeChange: {
            type: Function,
            default: function(){
                return null
            }
        },
        pageChange: {
            type: Function,
            default: function(){
                return null
            }
        },
        pageLayout: {
            default: function (){
                return 'total, prev, pager, next, jumper'
            }
        }
    },

    methods: {
        myPageChange(currentPage){
            //调用父组件的方法
            this.pageChange(currentPage)
        }
    },
    computed: {
        align(){
            let res;
            switch(this.paginationAlign){
                case 'right':
                    res = 'textR'
                    break
                case 'center':
                    res = 'textC'
                    break
                default:
                    res = ''
            }
            return res
        },

    }
}
</script>
